<!--Lab2新增-->
<!--商店列表父组件中的单个商店子组件-->
<script setup lang="ts">
import { defineProps } from 'vue'
import {ref} from 'vue'
import {singleStoreInfo} from "../api/store.ts";

const logoUrl = ref('')
const name = ref('')
const score = ref()
const number = ref(0)
const colors = ref(['#99A9BF', '#F7BA2A', '#FF9900'])
const props = defineProps<{
  id : number,
}>()
getinfo()
function getinfo() {
  singleStoreInfo(props.id).then(res => {
    name.value = res.data.result.name
    logoUrl.value = res.data.result.logoURL
    score.value = res.data.result.rating
    score.value = score.value.toFixed(1)
    number.value = res.data.result.commentNumber
  })
}


</script>

<template>
  <el-card class="store-item-card" :body-style="{ padding: '0px' }" shadow="hover">
    <el-image :src="logoUrl" fit="fill" class="logo-image" ></el-image>
    <div style="padding: 14px">
    <h1 class="store-name">{{ name }}</h1>
      <el-space direction="vertical">
    <el-rate
        v-model = "score"
        disabled
        show-score
        text-color="#99A9BF"
        score-template="{value}分"
        :colors="colors"></el-rate>

      <el-text>已有{{number}}人评分</el-text>
      </el-space>

    </div>
  </el-card>
</template>

<style scoped>

.store-item-card {
  margin: 20px;
  border-radius: 8px;
  min-width: 25%;
  max-width: 30px;
}

.logo-image {
  height: 250px;
  display: block;
}
</style>
